// 导入 React
import React, { useEffect } from 'react';
// 导入 Outlet, NavLink 用于路由嵌套和导航
import { Outlet, NavLink, useLocation } from 'react-router-dom';
// 导入样式
import '../assets/css/MainLayout.css';
import { getCurrentUser, logout, isLoggedIn } from '../store/auth'; // 导入权限方法
import { useNavigate } from 'react-router-dom'; // 导入跳转
import { Button } from 'antd'; // 导入 Button 组件

// 主布局组件
const MainLayout = () => {
  const user = getCurrentUser(); // 获取当前用户
  const navigate = useNavigate(); // 跳转方法
  const location = useLocation(); // 获取当前路由

  // 登录守卫：未登录自动跳转到登录页
  useEffect(() => {
    if (!isLoggedIn() && location.pathname !== '/login') {
      navigate('/login');
    }
    if (isLoggedIn() && location.pathname === '/login') {
      navigate('/');
    }
  }, [location]);

  // 退出登录
  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  // 渲染
  return (
    <div className="main-layout" style={{ minHeight: '100vh', background: 'linear-gradient(120deg, #e0e7ff 0%, #f8fafc 100%)' }}>
      {/* 右上角用户信息栏 */}
      <div style={{
        position: 'fixed',
        top: 24,
        right: 32,
        background: '#fff',
        borderRadius: 16,
        boxShadow: '0 4px 24px rgba(0,0,0,0.08)',
        padding: '12px 28px',
        display: 'flex',
        alignItems: 'center',
        gap: 16,
        zIndex: 100,
        minWidth: 220
      }}>
        {user && (
          <>
            {/* 用户头像（首字母圆形） */}
            <div style={{
              width: 40, height: 40, borderRadius: '50%', background: '#6366f1',
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 20, marginRight: 8, boxShadow: '0 2px 8px #e0e7ff'
            }}>{user.username?.[0]?.toUpperCase() || '?'}</div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
              <span style={{ color: '#333', fontWeight: 700, fontSize: 16, letterSpacing: 1 }}>
                {user.username} <span style={{ color: '#6366f1', fontWeight: 500, fontSize: 14 }}>（{user.role === 'admin' ? '管理员' : '普通员工'}）</span>
              </span>
              <Button type="link" onClick={handleLogout} style={{ color: '#6366f1', fontWeight: 500, fontSize: 15, padding: 0, marginTop: 2 }}>退出登录</Button>
            </div>
          </>
        )}
      </div>
      {/* 侧边导航栏 */}
      <nav className="sidebar" style={{
        paddingTop: 80,
        minHeight: '100vh',
        width: 240,
        background: 'linear-gradient(160deg, #6366f1 0%, #818cf8 100%)',
        borderTopRightRadius: 32,
        borderBottomRightRadius: 32,
        boxShadow: '4px 0 24px 0 rgba(99,102,241,0.08)',
        position: 'fixed',
        left: 0,
        top: 0
      }}>
        <h2 style={{ fontWeight: 800, fontSize: 24, color: '#fff', marginBottom: 36, letterSpacing: 2, textAlign: 'center', textShadow: '0 2px 8px #6366f1' }}>电商后台管理系统</h2>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {/* 菜单项样式美化 */}
          <li style={{ marginBottom: 18 }}>
            <NavLink to="/user-management"
              className={({ isActive }) => (isActive ? 'active-menu' : 'menu')}
              style={{ fontSize: 16, fontWeight: 600, borderRadius: 8, padding: '10px 24px', display: 'block', color: '#fff', transition: 'background 0.2s' }}>
              员工权限管理
            </NavLink>
          </li>
          <li style={{ marginBottom: 18 }}>
            <NavLink to="/category-management"
              className={({ isActive }) => (isActive ? 'active-menu' : 'menu')}
              style={{ fontSize: 16, fontWeight: 600, borderRadius: 8, padding: '10px 24px', display: 'block', color: '#fff', transition: 'background 0.2s' }}>
              商品管理
            </NavLink>
          </li>
          <li style={{ marginBottom: 18 }}>
            <NavLink to="/stock-management"
              className={({ isActive }) => (isActive ? 'active-menu' : 'menu')}
              style={{ fontSize: 16, fontWeight: 600, borderRadius: 8, padding: '10px 24px', display: 'block', color: '#fff', transition: 'background 0.2s' }}>
              库存管理
            </NavLink>
          </li>
          {user && user.role === 'admin' && (
            <>
              <li style={{ marginBottom: 18 }}>
                <NavLink to="/organization-management"
                  className={({ isActive }) => (isActive ? 'active-menu' : 'menu')}
                  style={{ fontSize: 16, fontWeight: 600, borderRadius: 8, padding: '10px 24px', display: 'block', color: '#fff', transition: 'background 0.2s' }}>
                  组织架构管理
                </NavLink>
              </li>
              <li style={{ marginBottom: 18 }}>
                <NavLink to="/data-management"
                  className={({ isActive }) => (isActive ? 'active-menu' : 'menu')}
                  style={{ fontSize: 16, fontWeight: 600, borderRadius: 8, padding: '10px 24px', display: 'block', color: '#fff', transition: 'background 0.2s' }}>
                  数据管理与报表
                </NavLink>
              </li>
            </>
          )}
        </ul>
      </nav>
      {/* 主内容区 */}
      <main className="content" style={{
        paddingTop: 60,
        marginLeft: 240,
        minHeight: '100vh',
        background: 'transparent',
        padding: '32px 40px',
        boxSizing: 'border-box',
        overflow: 'auto'
      }}>
        <Outlet />
      </main>
      {/* 菜单选中高亮样式 */}
      <style>{`
        .active-menu {
          background: rgba(255,255,255,0.18) !important;
          color: #fff !important;
          box-shadow: 0 2px 8px #6366f1;
        }
        .menu:hover {
          background: rgba(255,255,255,0.10) !important;
          color: #e0e7ff !important;
        }
      `}</style>
    </div>
  );
};

// 导出主布局
export default MainLayout; 